// Media Queries
@mixin breakpoint($min-width: null, $min-height: null, $medium: screen) {
  @if ($min-width != null and $min-height != null) {
    @media #{$medium} and (min-width: $min-width) and (min-height: $min-height) {
      @content;
    }
  } @else
  if ($min-width != null and $min-height == null) {
    @media #{$medium} and (min-width: $min-width) {
      @content;
    }
  } @else
  if ($min-width == null and $min-height != null) {
    @media #{$medium} and (min-height: $min-height) {
      @content;
    }
  }
}

// Creating triangles
@mixin triangle ($size, $color, $direction) {
  height: 0;
  width: 0;
  $width: nth($size, 1);
  $height: nth($size, length($size));
  $foreground-color: nth($color, 1);
  $background-color: if(length($color) == 2, nth($color, 2), transparent);
  @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
    $width: $width / 2.5;
    $height: if(length($size) > 1, $height, $height/2);
    @if $direction == up {
      border-bottom: $height solid $foreground-color;
      border-left: $width solid $background-color;
      border-right: $width solid $background-color;
    } @else
    if $direction == right {
      border-bottom: $width solid $background-color;
      border-left: $height solid $foreground-color;
      border-top: $width solid $background-color;
    } @else
    if $direction == down {
      border-left: $width solid $background-color;
      border-right: $width solid $background-color;
      border-top: $height solid $foreground-color;
    } @else
    if $direction == left {
      border-bottom: $width solid $background-color;
      border-right: $height solid $foreground-color;
      border-top: $width solid $background-color;
    }
  } @else
  if ($direction == up-right) or ($direction == up-left) {
    border-top: $height solid $foreground-color;
    @if $direction == up-right {
      border-left: $width solid $background-color;
    } @else
    if $direction == up-left {
      border-right: $width solid $background-color;
    }
  } @else
  if ($direction == down-right) or ($direction == down-left) {
    border-bottom: $height solid $foreground-color;
    @if $direction == down-right {
      border-left: $width solid $background-color;
    } @else
    if $direction == down-left {
      border-right: $width solid $background-color;
    }
  } @else
  if ($direction == inset-up) {
    border-color: $background-color $background-color $foreground-color;
    border-style: solid;
    border-width: $height $width;
  } @else
  if ($direction == inset-down) {
    border-color: $foreground-color $background-color $background-color;
    border-style: solid;
    border-width: $height $width;
  } @else
  if ($direction == inset-right) {
    border-color: $background-color $background-color $background-color $foreground-color;
    border-style: solid;
    border-width: $width $height;
  } @else
  if ($direction == inset-left) {
    border-color: $background-color $foreground-color $background-color $background-color;
    border-style: solid;
    border-width: $width $height;
  }
}


// Breakpoint-loop
// @include breakpoint-loop(width, (($medium, 80%), ($large, 50%)));
@mixin breakpoint-loop($element, $properties) {
    @each $property in $properties {
        $size: nth($property, 1);
        $value: nth($property, 2);

        @include breakpoint($size) {
            #{$element}: $value;
        }
    }
}


// Full stretching an item the size of it's parent.
// Remmeber that the parent can't have the position: static.
// otherwise this mixin won't work

@mixin full-absolute() {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
};


// https://github.com/W3cplus/SassMagic/blob/master/src/mixins/_position.scss#L34-L42
// 简化position编写 @include position(absolute,top 0 right 0 bottom 0 left 0); ->  {position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
@mixin position($position,$args){
	position: $position;
	@each $o in top right bottom left {
		$i: index($args, $o);
		@if $i and $i + 1 <= length($args) and type-of(nth($args, $i + 1)) == number {
			#{$o}: nth($args, $i + 1);
		}
	}
}

// 设置为行内元素
@mixin inline-block($alignment: $inline-block-alignment) {
    display: inline-block;
    @if $alignment and $alignment != none {
        vertical-align: $alignment;
    }
    @if $legacy-support-for-ie {
        *vertical-align: auto;
        zoom: 1;
        *display: inline;
    }
}

// 清除浮动 @include clearfix
@mixin clearfix{
  @if $legacy-support-for-ie {
      *zoom: 1;
  }
  &:before,
  &:after {
      content: "";
      display: table;
  }
  &:after {
      clear: both;
      overflow: hidden;
  }
}
//占位选择器 @extend %clearfix
%clearfix { @include clearfix;}

// 截取文本，文本过长...
@mixin singleline-ellipsis($substract:0){//`$substract`单位为%
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100% - $substract;
}
%singleline-ellipsis {
  @include singleline-ellipsis;
}

//按行数截断文本
@mixin ellipsis-line($length:2) {
  display: -webkit-box;
  -webkit-line-clamp: $length;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  overflow: hidden;
}


/**
 *  .5px宽度
 */

 @mixin borderHalfPx($borderColor: #ddd, $borderRadius: 0, $borderTop: 0, $borderRight: 0, $borderBottom: 0, $borderLeft: 0, $borderStyle: solid) {
  position: relative;
  &::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 200%;
      height: 200%;
      border-radius: $borderRadius * 2;
      border: $borderTop $borderStyle $borderColor;
      border-right-width: $borderRight;
      border-bottom-width: $borderBottom;
      border-left-width: $borderLeft;
      transform-origin: 0 0;
      -webkit-transform-origin: 0 0;
      transform: scale(.5, .5);
      -webkit-transform: scale(.5, .5);
  }
}

@mixin borderHalfPxRound($borderColor: #ddd, $borderRadius: 0) {
   @include borderHalfPx($borderColor, $borderRadius, 1px, 1px, 1px, 1px);
}

@mixin borderTopHalfPx($borderColor: #ddd, $borderRadius: 0) {
  @include borderHalfPx($borderColor, $borderRadius, 1px, 0, 0, 0);
  // 解决before内容盖住div, 点击失效的问题 (例如：点击input无法focus)
  &::before {
      height: 0;
      bottom: initial;
  }
}

@mixin borderBottomHalfPx($borderColor: #ddd, $borderRadius: 0) {
  @include borderHalfPx($borderColor, $borderRadius, 0, 0, 1px, 0);
  &::before {
      height: 0;
      top: initial;
  }
}

@mixin borderLeftHalfPx($borderColor: #ddd, $borderRadius: 0) {
  @include borderHalfPx($borderColor, $borderRadius, 0, 0, 0, 1px);
  &::before {
      width: 0;
      right: initial;
  }
}

@mixin borderRightHalfPx($borderColor: #ddd, $borderRadius: 0) {
  @include borderHalfPx($borderColor, $borderRadius, 0, 1px, 0, 0);
  &::before {
      width: 0;
      left: initial;
  }
}

@mixin borderHalfPxRoundTheme($themeBorderName: 'subtitleBorderColor', $borderRadius: 0) {
  @include borderHalfPxRound(#ddd, 0);
  // 边框线颜色覆盖
  &::before {
      @include setBorderColor($themeBorderName);
  }
}

/** 两边线箭头 **/
@mixin fnArrow($size, $color, $direction: right, $borderSize: 2px) {
  @include inline-block(none);
  width: $size;
  height: $size;
  border-radius: $borderSize;
  border-top-left-radius: 0;
  background: transparent;
  border-right: $borderSize solid $color;
  border-bottom: $borderSize solid $color;
  @if $direction == right {
      border-top-right-radius: 0;
      border-bottom-left-radius: 0;
      transform: rotate(-45deg);
  } @else if $direction == bottom {
      transform: translate(0, -20.71%) rotate(45deg);
  } @else if $direction == left {
      transform: rotate(135deg);
  } @else if $direction == top {
      transform: translate(0, 20.71%) rotate(-135deg);
  }
}
